import { login, getUserInfo, getUserDetailById } from '@/api/user.js'
import { getToken, setToken, removeToken } from '@/utils/auth'
export default {
  // 开启模块命名空间 才算是严格的模块化管理
  // 访问 mutation action函数的时候 都需要在前面加上模块名称才可以
  namespaced: true,
  // 箭头函数？
  // data(){ return {响应式数据} } 复用的时候如果直接写成对象 由于引用类型的特性
  // 各个组件之间共享data中的数据的  组件一个发生改变另一个也会受到影响

  // 改成函数return对象之后 每一次组件复用的时候都会重新执行一下这个函数
  // 每次返回的都是一个全新的对象 也就是每一个复用的组件 都拥有一份自己独立的数据 互不影响

  // vuex中的模块也是可能进行复用的 为了复用的时候 互相不影响 采用同样的函数执行 return对象的形式
  state: () => ({
    token: getToken() || '',
    userInfo: {}
  }),
  mutations: {
    setToken(state, value) {
      state.token = value
      setToken(value)
    },
    // 获取用户信息
    setUserInfo(state, userinfo) {
      state.userInfo = userinfo
    },
    // 删除用户信息
    reomveUserInfo(state) {
      state.userInfo = {}
      state.token = ''
      removeToken()
    }
  },
  actions: {
    // promise:
    // 基础原理：在Promise 链中 如果前一个.then方法中return  了new Promise对象
    // 那么后一个.then 的回调 会等到 new Promise对象状态发生变化之后才会执行
    asyncSetToken(ctx, payload) {
      return new Promise((resolve, reject) => {
        login(payload).then(res => {
          ctx.commit('setToken', res)
          resolve()
        })
        // console.log(res)
      })
    },
    asyncSetUserInfo(ctx, obj) {
      return new Promise((resolve, reject) => {
        getUserInfo().then(res => {
          getUserDetailById(res.userId).then(imgRes => {
            ctx.commit('setUserInfo', { ...res, ...imgRes })
            resolve()
          })
        })
      })
    }
    // 案例
    // asyncSetObj(ctx, payload) {
    //   return new Promise((resolve, reject) => {
    //     ctx.commit('setObj', payload)
    //     setTimeout(() => {
    //       resolve()
    //     }, 3000)
    //   })
    // }
  }
}
